<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表格的增删改查</title>
	</head>
	<style>


	</style>

	</table>
	<body>
		账号<input type="text" name="account" />
		密码<input type="text" name="password" />
		手机号<input type="text" name="telephone" />
		<button id="addUser">新增</button>
		<table border="1">
			<thead>
				<tr>
					<td>账号</td>
					<td>密码</td>
					<td>手机号</td>
					<td>操作</td>
				</tr>

			</thead>
			<tbody id="tbody">
			</tbody>
			<script src="jquery-1.11.0.min.js"></script>
			<script type="text/javascript">
				$(document).ready(function() {
					function selectUser() {
						var users = [{
							account: "admin1",
							password: "123456",
							telephone: "15674130958"
						}, {
							account: "admin2",
							password: "234567",
							telephone: "15674130968"
						}, {
							account: "admin3",
							password: "345678",
							telephone: "15674130969"
						}];
						users.forEach(function(obj,index) {
							var tr = $("<tr></tr>");
							var td1 = $("<td></td>");
							var td2 = $("<td></td>");
							var td3 = $("<td></td>");
							var td4 = $("<td></td>");
							td1.text(obj.account);
							td2.text(obj.password);
							td3.text(obj.telephone);
							td4.html("<button class='updateUser'>修改</button><button class='delUser'>删除</button>");
							tr.append(td1).append(td2).append(td3).append(td4).appendTo("#tbody");

						})
					}
					selectUser();
					//新增
					$("#addUser").click(function() {
						//获取输入框的值
						var account = $("input[name='account']").val();
						var password = $("input[name='password']").val();
						var telephone = $("input[name='telephone']").val();
						var opation = $("<button class='updateUser'>修改</button><button class='delUser'>删除</button>");
						//将输入框的值放入到创建的元素中,
						var tr = $("<tr></tr>");
						var td1 = $("<td></td>").text(account);
						var td2 = $("<td></td>").text(password);
						var td3 = $("<td></td>").text(telephone);
						var td4 = $("<td></td>").append(opation);

						//并且将元素添加到页面上
						tr.append(td1).append(td2).append(td3).append(td4).appendTo("#tbody");
					})
					//实现删除
					$(document).on("click",".delUser",function() {
						$(this).parent().parent().remove();
					});
					//实现修改(动态绑定)
					$(document).on("click", ".updateUser",function() {
						//封装
						//当前被点击修改按钮的父亲<tr>
						var tr=$(this).parent().parent();
						$("input[name]").each(function(index){
							tr.find("td").eq(index).text($(this).val());
						});
						
					});
				})
			</script>
	</body>
</html>
